<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>55社区</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/theme/default/images/favicon.png">
    <jsp:include page="common.jsp"></jsp:include>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default sq-head ">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.back()" class="">
            <i class="am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="" class="">购物车</a>
    </h1>
</header>
<div style="height: 49px;"></div>
<!--购物车空的状态-->
<div class="login-logo">
    <c:if test="${mapList==[]}">
        <img src="${ctx}/static/images/logo.png">
        <p>亲、您的购物车还是空空的哦，快去装满它!</p>
        <a href="${ctx}/index.jsp" class="goshopping">前去逛逛</a>
    </c:if>
</div>
<ul class="shopcart-list">
    <c:forEach var="a" items="${mapList}" varStatus="b">
        <li>
            <label class="am-checkbox am-warning">
                <input type="checkbox" checked="" id="check" value="" data-am-ucheck checked>
            </label>
            <a href="${ctx}/goods/detail.do?name=${a.goods_name}"><img src="${ctx}/static/${a.goods_img}"
                                                                       class="shop-pic"/></a>
            <div class="shop-list-mid">
                <div class="tit"><a href="${ctx}/goods/detail.do?name=${a.goods_name}">${a.goods_name}</a></div>
                <div class="d-stock">
                    <a class="decrease">-</a>
                    <input id="num" readonly="" class="text_box" name="" type="text" value="${a.trolley_num}">
                    <a class="increase">+</a>
                    <div style="display: none" class="id">${a.trolley_id}</div>
                    <div style="display: none" class="goods_id">${a.goods_id}</div>
                    <div style="display: none" class="user_id">${a.user_id}</div>
                </div>
            </div>
            <b class="shop-list-price">${a.goods_price} </b>
            <div class="del"><i class="am-icon-trash"></i></div>
        </li>
        <div style="height: 10px; background: #eee;"></div>
    </c:forEach>
</ul>


<div class="shop-fix">

    <label class="am-checkbox am-warning">
        <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
    </label>
    <a class="delall">批量删除</a>
    <a  class="js-btn " href="javascript:void(0);">去结算</a>
    <div class="js-text">
        <P>合计：<b></b></P>
        <p class="js-car">免费配送</p>
    </div>
</div>

<!--底部-->
<jsp:include page="footer.jsp"></jsp:include>


<script>
    //购物数量加减
    $(function () {
        var salary = 0;
        var j = 0;
        $(".shop-list-mid").each(function () {
            if ($(this).siblings("label").find("#check").prop("checked")) {
                var sal = $(this).siblings("b").text().trim();
                var num = $(this).find("input").val();
                j = salary;
                salary = sal * num + j;
            }
        });
        $(".js-text").find("b").html("￥" + salary);

        $('.increase').click(function () {

            $(".js-text").find("b").html("");
            var self = $(this);
            var current_num = parseInt(self.siblings('input').val());
            current_num += 1;
            self.siblings('input').val(current_num);
            var mydata = {"id": $(this).parent().find(".id").text().trim()};
            $.post("${ctx}/trolley/increase.do", mydata, function (data) {

            }, "json");
            var salary = 0;
            var j = 0;
            $(".shop-list-mid").each(function () {
                if ($(this).siblings("label").find("#check").prop("checked")) {
                    var sal = $(this).siblings("b").text().trim();
                    var num = $(this).find("input").val();
                    j = salary;
                    salary = sal * num + j;

                }

            });

            $(".js-text").find("b").html(salary);

        });
        $(".js-btn").click(function () {
            var salary = 0;
            var j = 0;
            var id=""
            $(".shop-list-mid").each(function () {
                if ($(this).siblings("label").find("#check").prop("checked")) {
                    id+=$(this).find(".id").text().trim();
                    id+=",";
                    var sal = $(this).siblings("b").text().trim();
                    var num = $(this).find("input").val();
                    j = salary;
                    salary = sal * num + j;
                }

            });
            window.location.href="${ctx}/trolley/shopping.do?id="+id+"&salary="+salary;
        })
        $('.decrease').click(function () {

            $(".js-text").find("b").html("");
            var self = $(this);
            var current_num = parseInt(self.siblings('input').val());
            if (current_num > 1) {
                current_num -= 1;
                self.siblings('input').val(current_num);

            }
            var mydata = {"id": $(this).parent().find(".id").text().trim()};
            $.post("${ctx}/trolley/decrease.do", mydata, function (data) {

            }, "json");
            var salary = 0;
            var j = 0;
            $(".shop-list-mid").each(function () {
                if ($(this).siblings("label").find("#check").prop("checked")) {
                    var sal = $(this).siblings("b").text().trim();
                    var num = $(this).find("input").val();
                    j = salary;
                    salary = sal * num + j;
                }
            });
            $(".js-text").find("b").html(salary);

        });
        $(".del").click(function () {
            var mydat = {
                "goods_id": $(this).parent().find(".goods_id").text().trim(),
                "user_id": $(this).parent().find(".user_id").text().trim()
            };
            $.post("${ctx}/trolley/delete.do", mydat, function () {

            }, "json");
            $(this).parent("li").remove();
            setTimeout(function () {
                window.location.reload()
            }, 1000)
        })
        $(".am-ucheck-checkbox").click(function () {
            setTimeout(function () {
                window.location.reload()
            }, 1000)
        })
        $(".delall").click(function () {
            $(".am-checkbox").each(function () {
                if ($(this).find("#check").prop("checked")) {
                    var id=$(this).parent().find(".id").text().trim();
                    var mydat = {"trolley_id": id};
                    $.post("${ctx}/trolley/deleteAll.do", mydat, function () {

                    }, "json");
                }
            });

            $(".shopcart-list").remove("li");
            setTimeout(function () {
                window.location.reload()
            }, 1000)
        })
    })
</script>
</body>
</html>
